/*
	创建多滚动条时，要从外向里创建。不然会出现事件覆盖。同一个id不能同时添加水平与垂直滚动条。
	var tscroll = new $MaxJh_scroll("box",bool);   //为id为box元素创建垂直滚动条,bool默认不写。当bool为ture时，为水平滚动条
	tscroll.scrollBox={width:10,height:10};		//滚动条的宽度高度。垂直只需设置width，height无效。水平只需设置height,width无效。
	tscroll.scrollBox_button={width:4,height:8,color:"#333"};	//滚动条两端的按钮的宽度、高度、颜色。垂直只需设置width，height无效。水平只需设置height,width无效。
	tscroll.scrollBox_button_triangle={width:3,color:"red"};	//滚动条两端按钮中的小三角的宽度和颜色。
	tscroll.scrollBox_bar={color:"#111"};	//滚动条中间的颜色。
	tscroll.scrollBox_sbar={color:"#999"};	//滚动条滑块的颜色。
	tscroll.init(args);		//初始化滚动条。默认不写,args为true时是给整个页面（body）加滚动条

*/
//$MaxJh_scroll构造函数,bool等于true时显示水平滚动条
function $MaxJh_scroll(id,bool){
	this.id =id;
	this.horscroll = bool?true:false;
	this.isbody = false;//是否body滚动条
	this.step=10;//点击按钮移动的距离
	this.scrollBox={};//滚动条盒子的宽度与高度
	this.scrollBox_button={};//滚动条上下的按钮盒子高度、宽度、颜色
	this.scrollBox_button_triangle={};//滚动条上下按钮内的三角形，宽、颜色和左偏移。left需要计算求出
	this.scrollBox_bar={};//滚动条中滚动条的宽度、高度、颜色。上偏移量。top需要计算求出
	this.scrollBox_sbar={};//滚动条滑块的宽度、高度、颜色、左偏移量、上偏移量。top需要计算求出
};
//$MaxJh_scroll原型
$MaxJh_scroll.prototype = {
	constructor:$MaxJh_scroll,
	//初始化参数，对象混入
	parameter:function(){
		//对象混入
		this.scrollBox = $jsonMix({width:20,height:20},this.scrollBox);
		this.scrollBox_button = $jsonMix({color:"#333"},this.scrollBox_button);
		this.scrollBox_button_triangle = $jsonMix({width:6,height:6,color:"#f00"},this.scrollBox_button_triangle);
		this.scrollBox_bar = $jsonMix({width:20,height:20,color:"#333"},this.scrollBox_bar);
		this.scrollBox_sbar = $jsonMix({width:40,height:16,color:"#666"},this.scrollBox_sbar);
	},
	//水平滚动条模版
	hortemplate:function(){
		return "<div class='MaxJH_hor_scroll_"+this.id+"'>"+
			 "	<div class='MaxJH_hor_scroll_"+this.id+"_bt_up'>"+
			 "		<span class='MaxJH_hor_scroll_"+this.id+"_up'></span>"+
			 "	</div>"+
			 "	<div class='MaxJH_hor_scroll_"+this.id+"_bar'>"+
			 "		<div class='MaxJH_hor_scroll_"+this.id+"_cover'></div>"+
			 "		<div class='MaxJH_hor_scroll_"+this.id+"_sbar'>	</div>"+
			 "	</div>"+
			 "	<div class='MaxJH_hor_scroll_"+this.id+"_bt_down'>"+
			 "		<span class='MaxJH_hor_scroll_"+this.id+"_down'></span>"+
			 "	</div>"+
			 "</div>"
	},
	//将水平滚动条添加到dom对象
	addLeftScrollBar:function(){
		var sdom = document.getElementById(this.id);
		if(this.isbody){
			//滚动条的宽度
			this.scrollBox.position = "fixed";
			this.scrollBox.width =  window.innerWidth;
		}else{
			//滚动条的宽度
			this.scrollBox.position = "absolute";
			this.scrollBox.width =  sdom.offsetWidth;
		}
		//判断是否显示滚动条，以及滚动条滑块的宽度
		
		/***************************************************************************/
		var conMax = this.getMaxWH();
		var conMaxW = conMax.W - this.scrollBox.width;
		if(conMaxW<=this.scrollBox.width){
			return ;
		}else{
			this.parameter();
			this.scrollBox_button.width = this.scrollBox_button.height = this.scrollBox.height;
			//滚动条的宽度和左偏移量
			this.scrollBox_bar.width = this.scrollBox.width - (this.scrollBox_button.width+2) *2;
			this.scrollBox_bar.left = this.scrollBox_button.width+2;
			//滑块的宽度、高度、上偏移量、左偏移量
			this.scrollBox_sbar.width = (this.scrollBox.width / conMaxW )*this.scrollBox.width;
			this.scrollBox_sbar.height = (this.scrollBox_sbar.height>this.scrollBox.height)?this.scrollBox.height:this.scrollBox_sbar.height;
			this.scrollBox_sbar.top = (this.scrollBox.height - this.scrollBox_sbar.height)/2;
			this.scrollBox_sbar.left = 0;
			//三角形与上边的偏移量
			this.scrollBox_button_triangle.top = (this.scrollBox_sbar.height - this.scrollBox_button_triangle.height)/2;
			
			sdom.style.position = "relative";
			var wrap = "<div style='width:"+conMaxW+"px'>"+sdom.innerHTML+"</div>";
			sdom.innerHTML = wrap;
			//将滚动条模版添加到id为id的dom中
			sdom.innerHTML +=this.hortemplate();

			//获取添加的滚动条dom对象
			this.scrollDom = this.getScrollDom(this.id);
			this.horcss();
			this.eventListener();
		}
	},
	//初始化水平滚动条css样式
	horcss:function(){
		var stydom = document.createElement("style");
		var sty = ".MaxJH_hor_scroll_"+this.id+" {position:"+this.scrollBox.position+";left:0px;bottom:0px;width:"+this.scrollBox.width+"px;height:"+this.scrollBox.height+"px;}"+
		".MaxJH_hor_scroll_"+this.id+" .MaxJH_hor_scroll_"+this.id+"_bt_up {position:absolute;top:0px;left:0;width:"+this.scrollBox_button.width+"px;height:"+this.scrollBox_button.height+"px;background:"+this.scrollBox_button.color+";}"+
		".MaxJH_hor_scroll_"+this.id+" .MaxJH_hor_scroll_"+this.id+"_bt_up .MaxJH_hor_scroll_"+this.id+"_up{position:absolute;top:"+this.scrollBox_button_triangle.top+"px;left:0px;border-width:"+this.scrollBox_button_triangle.width+"px;border-style:solid;border-color:transparent "+this.scrollBox_button_triangle.color+" transparent transparent;}"+
		".MaxJH_hor_scroll_"+this.id+" .MaxJH_hor_scroll_"+this.id+"_bt_down{position:absolute;top:0px;right:0;width:"+this.scrollBox_button.width+"px;height:"+this.scrollBox_button.height+"px;background:"+this.scrollBox_button.color+";}"+
		".MaxJH_hor_scroll_"+this.id+" .MaxJH_hor_scroll_"+this.id+"_bt_down .MaxJH_hor_scroll_"+this.id+"_down{position:absolute;top:"+this.scrollBox_button_triangle.top+"px;right:0px;border-width:"+this.scrollBox_button_triangle.width+"px;border-style:solid;border-color:transparent transparent transparent "+this.scrollBox_button_triangle.color+";}"+
		".MaxJH_hor_scroll_"+this.id+" .MaxJH_hor_scroll_"+this.id+"_bar {position:absolute;top:0;left:"+this.scrollBox_bar.left+"px;width:"+this.scrollBox_bar.width+"px;height:"+this.scrollBox_bar.height+"px;background:"+this.scrollBox_bar.color+";}"+
		".MaxJH_hor_scroll_"+this.id+" .MaxJH_hor_scroll_"+this.id+"_bar .MaxJH_hor_scroll_"+this.id+"_cover {width:100%;height:100%;} "+
		".MaxJH_hor_scroll_"+this.id+" .MaxJH_hor_scroll_"+this.id+"_bar .MaxJH_hor_scroll_"+this.id+"_sbar {position:absolute;left:"+this.scrollBox_sbar.left+"px;top:"+this.scrollBox_sbar.top+"px;width:"+this.scrollBox_sbar.width+"px;height:"+this.scrollBox_sbar.height+"px;background:"+this.scrollBox_sbar.color+";}"
		stydom.innerHTML = sty ;
		document.getElementsByTagName("head")[0].appendChild(stydom)
	},
	//垂直滚动条模版
	vertemplate:function(){
		return "<div class='MaxJH_ver_scroll_"+this.id+"'>"+
		 "	<div class='MaxJH_ver_scroll_"+this.id+"_bt_up'>"+
		 "		<span class='MaxJH_ver_scroll_"+this.id+"_up'></span>"+
		 "	</div>"+
		 "	<div class='MaxJH_ver_scroll_"+this.id+"_bar'>"+
		 "		<div class='MaxJH_ver_scroll_"+this.id+"_cover'></div>"+
		 "		<div class='MaxJH_ver_scroll_"+this.id+"_sbar'>	</div>"+
		 "	</div>"+
		 "	<div class='MaxJH_ver_scroll_"+this.id+"_bt_down'>"+
		 "		<span class='MaxJH_ver_scroll_"+this.id+"_down'></span>"+
		 "	</div>"+
		 "</div>"
	},
	//添加垂直滚动条给dom对象
	addTopScrollBar:function(){
		var sdom = document.getElementById(this.id);
		if(this.isbody){
			this.scrollBox.position = "fixed";
			this.scrollBox.height = window.innerHeight;
		}else{
			this.scrollBox.position = "absolute";
			this.scrollBox.height = sdom.offsetHeight;
		}
		/*
		判断是否显示滚动条，以及滚动条滑块的宽度
		*/
		/***************************************************************************/
		var conMax = this.getMaxWH();
		var conMaxH = conMax.H;
		if(conMaxH<=this.scrollBox.height){
			return ;
		}else{
			this.parameter();
			//上下按钮的高度
			this.scrollBox_button.height = this.scrollBox_button.width = this.scrollBox.width;
			//上下按钮中的三角形的左偏移量
			this.scrollBox_button_triangle.left = (this.scrollBox.width - this.scrollBox_button_triangle.width * 2)/2;
			//滚动条的高度
			this.scrollBox_bar.width = this.scrollBox.width ; 
			this.scrollBox_bar.height = this.scrollBox.height - (this.scrollBox_button.height+2) * 2
			//滚动条的上偏移量
			this.scrollBox_bar.top = this.scrollBox_button.height + 2;
			//滑块的宽度
			this.scrollBox_sbar.width = (this.scrollBox_sbar.width<this.scrollBox.width)?this.scrollBox_sbar.width:this.scrollBox.width;
			//滑块的高度
			this.scrollBox_sbar.height = (this.scrollBox.height / conMaxH) * this.scrollBox.height
			//滑块的左偏移量
			this.scrollBox_sbar.left = (this.scrollBox.width - this.scrollBox_sbar.width)/2;
			//滑块的上偏移量
			this.scrollBox_sbar.top =0;

			sdom.style.position = "relative";
			var wrap = "<div>"+sdom.innerHTML+"</div>";
			sdom.innerHTML = wrap;
			//将滚动条模版添加到id为id的dom中
			sdom.innerHTML +=this.vertemplate();
			//获取添加的滚动条dom对象
			this.scrollDom = this.getScrollDom(this.id);
			this.vercss();
			this.eventListener();
		};
	},
	//初始化垂直滚动条css样式
	vercss:function(){
		var stydom = document.createElement("style");
		var sty = ".MaxJH_ver_scroll_"+this.id+" {position:"+this.scrollBox.position+";right:0px;top:0px;width:"+this.scrollBox.width+"px;height:"+this.scrollBox.height+"px;}"+
		".MaxJH_ver_scroll_"+this.id+" .MaxJH_ver_scroll_"+this.id+"_bt_up {position:absolute;top:0px;width:"+this.scrollBox_button.width+"px;height:"+this.scrollBox_button.height+"px;background:"+this.scrollBox_button.color+";}"+
		".MaxJH_ver_scroll_"+this.id+" .MaxJH_ver_scroll_"+this.id+"_bt_up .MaxJH_ver_scroll_"+this.id+"_up{position:absolute;left:"+this.scrollBox_button_triangle.left+"px;top:0px;border-width:"+this.scrollBox_button_triangle.width+"px;border-style:solid;border-color:transparent transparent "+this.scrollBox_button_triangle.color+" transparent;}"+
		".MaxJH_ver_scroll_"+this.id+" .MaxJH_ver_scroll_"+this.id+"_bt_down{position:absolute;bottom:0px;width:"+this.scrollBox_button.width+"px;height:"+this.scrollBox_button.height+"px;background:"+this.scrollBox_button.color+";}"+
		".MaxJH_ver_scroll_"+this.id+" .MaxJH_ver_scroll_"+this.id+"_bt_down .MaxJH_ver_scroll_"+this.id+"_down{position:absolute;left:"+this.scrollBox_button_triangle.left+"px;bottom:0px;border-width:"+this.scrollBox_button_triangle.width+"px;border-style:solid;border-color:"+this.scrollBox_button_triangle.color+" transparent transparent transparent;}"+
		".MaxJH_ver_scroll_"+this.id+" .MaxJH_ver_scroll_"+this.id+"_bar {position:absolute;top:"+this.scrollBox_bar.top+"px;width:"+this.scrollBox_bar.width+"px;height:"+this.scrollBox_bar.height+"px;background:"+this.scrollBox_bar.color+";}"+
		".MaxJH_ver_scroll_"+this.id+" .MaxJH_ver_scroll_"+this.id+"_bar .MaxJH_ver_scroll_"+this.id+"_cover {width:100%;height:100%;} "+
		".MaxJH_ver_scroll_"+this.id+" .MaxJH_ver_scroll_"+this.id+"_bar .MaxJH_ver_scroll_"+this.id+"_sbar {position:absolute;left:"+this.scrollBox_sbar.left+"px;top:"+this.scrollBox_sbar.top+";width:"+this.scrollBox_sbar.width+"px;height:"+this.scrollBox_sbar.height+"px;background:"+this.scrollBox_sbar.color+";}"
		stydom.innerHTML = sty ;
		document.getElementsByTagName("head")[0].appendChild(stydom)
	},
	//获取滚动条dom对象方法
	getScrollDom:function(id){
		var sdom = document.getElementById(id);
		return sdom.children[1];
	//	var sdoms =	sdom.children; 
	//	var len = sdoms.length;
	//	return sdoms[len-1];
	},
	//获取滚动条的父元素中的子对象距离父元素上边框的最大距离
	getMaxWH:function(){
		//获取滚动条的父元素dom
		var maxH,maxW ;
		if(this.isbody){
			maxW = document.body.clientWidth || document.documentElement.scrollWidth;
			maxH = document.body.clientHeight || document.documentElement.scrollHeight;
		}else{
			var pardom = document.getElementById(this.id);
			var parChild = pardom.children;
			//求内容最大宽度和高度
			maxW = parChild[0].offsetLeft + parChild[0].scrollWidth;
			maxH = parChild[0].offsetTop + parChild[0].scrollHeight;
		};
		return {W:maxW,H:maxH};
	},
	//滚动条事件
	eventListener:function(){
		var mark = this.horscroll;
		var step = this.step;
		
		//获取滚动条的父元素dom
		var pardom = document.getElementById(this.id);
	//	var curdom = this.scrollDom;
		curdom = pardom.children[1];
		//滑块对象
		var sBoxBarJson = this.scrollBox_sbar;
		//滚动条对象类数组
		var scrollDoms = curdom.children;
		//上按钮对象
		var updom = scrollDoms[0];
		//滚动条对象，不包括上下按钮
		var scrollBar = scrollDoms[1];
		//下按钮对象
		var downdom = scrollDoms[2];
		//阴影遮罩层dom
		var coverdom = scrollBar.children[0];
		//滑块dom
		var bardom = scrollBar.children[1];
		//滚动条盒子的宽度和高度
		var boxWidth = this.scrollBox_bar.width;
		var boxHeight = this.scrollBox_bar.height;
		//滑块的宽度和高度
		var barWidth = this.scrollBox_sbar.width;
		var barHeight = this.scrollBox_sbar.height;
		//滚动条盒子中滑块移动的最大高度和宽度
		var conMaxW,conMaxH,maxW,maxH;
		maxW = boxWidth-barWidth;
		maxH = boxHeight-barHeight;
	//	alert(boxWidth);
		
		//滚动的内容最大宽度和高度
		var conMax = this.getMaxWH();
		if(this.isbody){
			conMaxW = conMax.W - window.innerWidth;
			conMaxH = conMax.H - window.innerHeight;
		//	alert(conMaxW);
		//	alert(conMaxH+"==="+boxHeight+"==="+barHeight)
		}else{
			conMaxW = conMax.W - pardom.offsetWidth;
			conMaxH = conMax.H - pardom.offsetHeight;
		}
		//
		var parc = pardom.children[0];
		
		//滚动的内容与滚动条的比例
		var conPerW = conMaxW /maxW;
		var conPerH = conMaxH /maxH;
		//向上按钮
		function clickButtonUp(){
			if(!mark){
				sBoxBarJson.top -= step;
				if(sBoxBarJson.top<0)sBoxBarJson.top=0;
				bardom.style.top =sBoxBarJson.top +"px";
				parc.style.marginTop = -sBoxBarJson.top * conPerH +"px";
			}else{
				sBoxBarJson.left -= step;
				if(sBoxBarJson.left<0)sBoxBarJson.left=0;
				bardom.style.left =sBoxBarJson.left +"px";
				parc.style.marginLeft = -sBoxBarJson.left * conPerW +"px";
			}
		};
		//向下按钮
		function clickButtonDown(){
			if(!mark){
				sBoxBarJson.top += step;
				if(sBoxBarJson.top>maxH)sBoxBarJson.top=maxH;
				bardom.style.top =sBoxBarJson.top +"px";
				parc.style.marginTop = -sBoxBarJson.top * conPerH +"px";
			}else{
				sBoxBarJson.left += step;
				if(sBoxBarJson.left>maxW)sBoxBarJson.left=maxW;
				bardom.style.left =sBoxBarJson.left +"px";
				parc.style.marginLeft = -sBoxBarJson.left * conPerW +"px";
			}
		};
		//阴影遮罩层
		coverdom.onmousedown = function(e){
			var ev = e||window.event;
			var pos = getXY(ev);
			if(!mark){
				var y = pos.y - getTop(this);
				if(y>maxH)y=maxH;
				bardom.style.top = y +"px";
				sBoxBarJson.top = y;
				parc.style.marginTop = -sBoxBarJson.top * conPerH +"px";
			}else{
				var x = pos.x - getLeft(this) ;
				if (x>maxW)x=maxW;
				bardom.style.left = x+"px";
				sBoxBarJson.left = x;
				parc.style.marginLeft = -sBoxBarJson.left * conPerW +"px";
			}
		};
		//滑块拖动
		bardom.onmousedown = function(e){
			var ev = e||window.event;
			var pos = getXY(ev);
			if (!mark){
				var y = pos.y;							
				var t = this.offsetTop;
			}else{
				var x = pos.x;
				var l = this.offsetLeft;
			}
			document.onmousemove = function(e){
				var evv = e || window.event;
				var poss = getXY(evv);
				if (!mark){
					var nt = poss.y - y +t;
					if(nt<0)nt=0;
					if(nt>maxH)nt=maxH;
					bardom.style.top = nt +"px";
					sBoxBarJson.top = nt;
					parc.style.marginTop = -sBoxBarJson.top * conPerH +"px";
				}else{
					var nl = poss.x - x +l;
					if(nl<0)nl=0;
					if(nl>maxW)nl=maxW;
					bardom.style.left = nl +"px";
					sBoxBarJson.left = nl;
					parc.style.marginLeft = -sBoxBarJson.left * conPerW +"px";
				}
			};
			document.onmouseup = function(e){
				document.onmousemove = null;
				document.onmouseup = null;
			};
		};
		//向上按钮
		updom.onclick = clickButtonUp;
		//向下按钮
		downdom.onmousedown = clickButtonDown;
		//火狐的鼠标滚轮事件为DOMMouseScroll,addEventListener("DOMMouseScroll", function(event) {})，其他为onmousewheel
		if(!this.horscroll){//垂直滚动条才添加事件
			pardom.onmousewheel = function(e){
			//	window.onmousewheel = function(){return false;};
				//火狐使用detail判断滚轮上下，其他使用wheelDelta
				var ev = e||window.event;
				//阻止浏览器默认行为
				ev.preventDefault();
				//阻止冒泡
				ev.stopPropagation();
				var wd = (ev.wheelDelta)?(ev.wheelDelta):(ev.detail);
				wd>0?clickButtonUp():clickButtonDown();
			};
		}
	},
	//初始化方法和属性,bool判断是不是body滚动条
	init:function(bool){
		if(bool)this.isbody = bool;
		var mark =this.horscroll ;
		//初始化css样式
		if(!mark){
			//将垂直滚动条添加到给对象
			this.addTopScrollBar(this.id);
		}else{
			//将水平滚动条添加到给对象
			this.addLeftScrollBar(this.id);
		};
	}
};